<!--任务列表-->
<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <!--搜索区-->
        <el-row>
            <el-col>
                <div class="search-wrapper">
                    <ul class="search-box">
                        <li><span class="filter-name">任务类别：</span>
                            <el-select v-model="listQuery.dutyTypeSearch" placeholder="请选择" clearable style="width:130px" class="filter-item">
                                <el-option v-for="item in dutyTypeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictValue"/>
                            </el-select></li>
                        <li><span class="filter-name">状态：</span>
                            <el-select v-model="listQuery.handleStateSearch"   placeholder="请选择" clearable style="width:150px" class="filter-item">
                                <el-option v-for="item in dutyStateOptions" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"/>
                            </el-select><br/></li>
                        <li><span class="filter-name">发布时间：</span>
                            <el-date-picker v-model="listQuery.createTimeSearch" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/></li>
                        <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="handSearch(value)">查询</el-button></li>
                    </ul>
                </div>
            </el-col>
        </el-row>
        <!--表格-->
        <el-row>
            <el-col>
                <div class="data-wrapper">
                    <template v-if="tableData!=null">
                        <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%">
                            <!--@selection-change="handleSelectionChange"-->
                            <!--<el-table-column type="selection" label="全选" width="50">-->
                            <!--</el-table-column>-->
                            <el-table-column type="index" label="序号" :index="indexMethod" width="50">
                            </el-table-column>
                            <el-table-column prop="dutyCode" label="任务编号"  :show-overflow-tooltip="true" width="100">
                            </el-table-column>
                            <el-table-column prop="dutyName"  label="任务名称" :show-overflow-tooltip="true" width="100">
                            </el-table-column>
                            <el-table-column prop="dutyType.name" label="任务类型" :show-overflow-tooltip="true" width="100" :formatter="dutyTypeformate">
                            </el-table-column>
                            <el-table-column prop="dutyNote" label="任务内容"  :show-overflow-tooltip="true" width="100">
                            </el-table-column>
                            <el-table-column prop="eName" label="所属事件名称" :show-overflow-tooltip="true" width="110">
                            </el-table-column>
                            <el-table-column prop="eCode" label="所属事件编码" :show-overflow-tooltip="true" width="110">
                            </el-table-column>
                            <el-table-column prop="createUser" label="任务发布人" :show-overflow-tooltip="true" width="110">
                            </el-table-column>
                            <el-table-column prop="createTime" label="任务发布时间" :show-overflow-tooltip="true"  width="130">
                            </el-table-column>
                            <el-table-column prop="liableUser" label="任务负责人" :show-overflow-tooltip="true" width="120">
                            </el-table-column>
                            <el-table-column prop="handleState" label="任务状态" :show-overflow-tooltip="true" :formatter="formatState">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" align="center" width="120">
                                <template slot-scope="scope">
                                    <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle @click="handleView(scope.$index, scope.row)"></el-button>
                                    <!--<el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="handleEdit(scope.$index, scope.row)"></el-button>-->
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-col>
        </el-row>
        <!--底部区域-->
        <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
            <!-- 批量导入 -->
            <el-col :span="4">
                <div class="grid-content">
                    <el-button type="primary">批量导出</el-button>
                </div>
            </el-col>
            <!-- 分页 -->
            <el-col :span="20">
                <div class="page-item">
                    <el-pagination background
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="listQuery.currentPage"
                                   :page-sizes="pageSizes"
                                   :page-size="listQuery.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="dataCount"/>
                </div>
            </el-col>
        </el-row>
        <!-- 弹出窗口区域 -->

        <!--查看弹窗-->
        <el-dialog title=查看 :visible.sync="dialogFormVisible">
            <el-form v-if="form">
                <el-row :gutter="10">
                    <el-col :span="12">
                        任务编码：{{form.dutyName}}
                    </el-col>
                    <el-col :span="12">
                        任务名称：{{form.dutyName}}
                    </el-col>
                    <el-col :span="12">
                        任务类别：{{form.dutyType}}
                    </el-col>
                    <el-col :span="12">
                        完成时间：{{form.completeTime}}
                    </el-col>
                    <el-col :span="12">
                        处理状态：{{form.handleState}}
                    </el-col>
                    <el-col :span="12">
                        处理结果：{{form.handleResult}}
                    </el-col>
                    <el-col :span="12">
                        责任人：{{form.liableUser}}
                    </el-col>
                    <el-col :span="12">
                        任务内容：{{form.dutyNote}}
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //时间下拉字典
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                //下拉类型options
                dutyTypeOptions: [],
                dutyStateOptions: [{
                    dictValue: -1,
                    dictName: '待受理'
                }, {
                    dictValue: 8,
                    dictName: '待确认拒绝'
                }, {
                    dictValue: 9,
                    dictName: '处理中'
                }, {
                    dictValue: 5,
                    dictName: '处理完成'
                },
                    {
                        dictValue: 6,
                        dictName: '已驳回'
                    }, {
                        dictValue: 0,
                        dictName: '任务完成'
                    }],
                //表格全局参数
                tableData: null,
                //默认数据总数
                dataCount: 100,
                pageSizes: [5, 10, 20, 30, 40],
                //批量选中参数
                //多选的值
                listSelect: [],
                //分页参数
                //搜索框参数
                searchInput: "",
                //搜索参数
                //搜索。axios发送的参数
                listQuery: {
                    currentPage: 1,
                    pageSize: 10
                },
                //弹框的数据是否可编辑
                readonly: true,
                value: "", //
                //页面加载
                loading: false,

                //弹层显示开关
                dialogFormVisible: false,
                //弹层表单数据
                form: {
                    //初始化form，避免报错
                    dutyType:{
                        name:''
                    }
                },
                //弹层宽度
                formLabelWidth: "100px",

                // 下拉选项
                options: [
                    {
                        value: "Leanne Graham",
                        label: "Leanne Graham"
                    }
                ],
                //类型下拉选项字典
                typeDir: [
                    {
                        value: "类1",
                        key: "1"
                    },
                    {
                        value: "类2",
                        key: "2"
                    }
                ]
            };
        },
        mounted() {
            // 初始化页面
            this.postList();

            //获取任务类型下拉
            this.getTypeOptions();
        },
        updated() {},
        destroyed() {},
        methods: {
            //type翻译
            dutyTypeformate(row, column){
                for ( var i = 0; i <this.dutyTypeOptions.length; i++){
                    if(row.dutyType===this.dutyTypeOptions[i].dictValue){
                        return this.dutyTypeOptions[i].dictName;
                    }
                }
            },

            // 状态翻译
            formatState: function(row, column) {


                if(row.handleState==-1){
                    return '待受理';
                }else if(row.handleState==8){
                    return '等待拒绝确认'
                }else if(row.handleState==9){
                    return  '处理中'
                }else if(row.handleState==5){
                    return  '任务结果待审核'
                }else if(row.handleState==0){
                    return  '任务已完成/关闭'
                }else if(row.handleState==6){
                    return  '已驳回'
                }else{
                    return  '其他'
                }
            },
            //获取任务类型下拉
            getTypeOptions(){
                //获取任务类型
                this.getDictionary({types:["DUTY_TYPE"]}).then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.dutyTypeOptions = data.data["DUTY_TYPE"];
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            },
            //列表查询
            postList() {
                this.loading = true;
                this.postRequest("/api/rcs/listDutys", this.listQuery)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.tableData = data.data;
                    this.dataCount = data.count;
                    console.log(this.tableData)
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });
            },
            //搜索功能
            handSearch() {
                console.log(this.listQuery)
                this.postList();
            },
            //增加操作
            openAdd() {
                this.readonly = false;
                this.form = {};
                this.dialogFormVisible = true;
            },
            //查看操作
            handleView(index, row) {
                this.readonly = true;
                this.form = row;
                this.dialogFormVisible = true;
            },
            //多选,点击选框时
            handleSelectionChange(val) {
                var self = this;
                self.listSelect = val; //多选的参数
            },
            indexMethod(index) {
                return (
                    index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
                );
            },
            //每页个数改变
            handleSizeChange(size) {
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.postList();
            },
            //当前页改变
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage = currentPage;
                this.postList();
            }
        }
    };
</script>



